<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CANAVAS</title>
    <style>
        .mycanvas{
          border: 2px solid black;
        }
    </style>
</head>

<body>
    <canvas class="mycanvas" width="1000px" height="800px">您的浏览器不支持CANAVAS</canvas>
    <!--如果使用CSS来控制canvas宽高会导致图像拉伸-->
</body>
<script>
    //获取节点
    var mycanvas = document.querySelector(".mycanvas");
    //获取上下文
    var ctx = mycanvas.getContext('2d');
    
    //绘制 并且 填充矩形
    //ctx.fillRect(50,50,50,50);
    
    //路径
    ctx.rect(100,50,100,100);
    
    //填充
    // ctx.fillStyle = "green";
    // ctx.fill();

    //描边
    ctx.strokeStyle = "red";
    ctx.stroke();

    //路径初始化
    ctx.beginPath();

    ctx.rect(250,50,100,100);
    ctx.strokeStyle = "green";
    ctx.stroke();

    ctx.beginPath();
    //设置路径的开始点
    ctx.moveTo(360,50);
    //从之前的点画到这里
    ctx.lineTo(450,60);
    ctx.lineTo(450,110);

    //设置线条宽度
    ctx.lineWidth = 5;
    
    ctx.stroke();
    

    ctx.beginPath();
    ctx.moveTo(100,180);
    ctx.lineTo(150,220);
    ctx.lineTo(50,220);
    //ctx.lineTo(100,180);  //直接画到原来的点，路径没有闭合
    ctx.closePath();     //闭合路径，最后一个点和最开始的一个点连接在一起
    ctx.stroke();




    //圆型
    ctx.beginPath();
    //圆形  弧  参数：中心点x 中心点y 半径r 起始弧度 结束弧度 顺时针/逆时针 默认是顺时针
    ctx.arc(100,300,80,0,2*Math.PI,false);
    ctx.stroke();

    //创建渐变颜色
    var grd = ctx.createLinearGradient(100,500,100,550);
    grd.addColorStop(0,"pink");
    grd.addColorStop(1,"purple");

    //文字
    ctx.beginPath();
    ctx.font = '50px 幼圆';
    ctx.fillStyle = grd;
    ctx.strokeStyle = grd;
    //水平对齐
    ctx.textAlign = "left";
    //垂直对齐
    ctx.textBaseline = "middle";
    ctx.fillText('asoul时代',100,500);
    ctx.strokeText('asoul时代',100,550);
  
</script>

</html>